<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>{{cmessage}}</h2>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 父传子：props
  const cpn = {
    template: '#cpn',
    // 数组语法
    // props: ['cmovies', 'cmessage'],

    // 对象语法
    props: {
      // 1.类型限制
      // cmovies: Array,
      // cmessage: String

      // 2.设置默认值及是否必传
      cmessage: {
        type: String,
        default: 'aaaaaa',
        required: true
      },
      // 类型是对象或数组时，默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {};
    },
    methods: {}
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      movies: ['三国演义', '水浒传', '红楼梦', '西游记']
    },
    components: {
      'cpn': cpn
    }
  });
</script>
</body>
</html>